<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptions">
      <template #form="{ form }">
        <VGroup>
          <el-select v-model="form.skuInfo.type" class="w-28">
            <el-option label="sku" value="sku"></el-option>
            <el-option label="赛盒SKU" value="sai_he_sku"></el-option>
            <el-option label="自定义sku" value="custom_sku"></el-option>
          </el-select>
          <el-input v-model="form.skuInfo.value" placeholder="请输入" class="w-44"></el-input>
        </VGroup>
        <el-input v-model="form.product_abbrev" placeholder="产品名称" class="w-52"></el-input>
        <VSelect v-model="form.supplier_name" placeholder="供应商" type="supplierName" allow-create style="min-width: 160px;" multiple
          filterable collapse-tags clearable />
        <el-input v-model="form.supplier_code" placeholder="供应商代码" class="w-52"></el-input>
        <VSelect v-model="form.is_assoc_ali" placeholder="是否关联1688" :options="options.is_assoc_ali"
          style="min-width: 160px;" multiple filterable collapse-tags clearable />
        <VSelect v-model="form.is_audit" placeholder="是否审核" :options="options.is_new" style="min-width: 160px;" multiple
          filterable collapse-tags clearable />
        <VGroup>
          <div class="v-group-item">添加时间</div>
          <VDate v-model="form.dateRange.value" />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <VButton auth="/purchase/product/product/batchassociation1688" type="primary" @click="handleBatch('relevance')">批量关联1688
        </VButton>
        <VButton auth="/purchase/product/product/editsupplier" @click="handleBatch('supplier')">批量修改供应商</VButton>
        <VAudit auth="/purchase/product/product/examine" field="p_id" url="/v1/product/product/batch-audit"
          :tableRef="tableRef" @success="query" />
        <VExport auth="/purchase/product/product/derive" mainKey="p_id" :name="baseName" :tableRef="tableRef" task
          class="ml-auto" />
      </template>
    </VTable>
    <Add ref="addRef" :options="options" @success="query" />
    <Relevance ref="relevanceRef" :options="options" @success="query" />
    <BatchRelevance ref="batchRelevanceRef" :options="options" @success="query" />
    <Supplier ref="supplierRef" :options="options" @success="query" />
    <VLog ref="logRef" />
    <VHistory ref="historyRef" />
    <HistoryPrice ref="HistoryPriceRef" />
  </VPage>
</template>

<script setup lang="jsx" name="Account">
import api from './api'
import Add from './components/Add'
import Relevance from './components/Relevance'
import BatchRelevance from './components/BatchRelevance'
import Supplier from './components/Supplier'
import HistoryPrice from './components/HistoryPrice'
import { getOption } from '@/api/public'
import { ElMessage, ElMessageBox } from 'element-plus'
import VHistory from '@/components/VHistory'

const baseName = 'product'
const tableRef = ref()
const logRef = ref()
const relevanceRef = ref()
const batchRelevanceRef = ref()
const supplierRef = ref()
const loadings = reactive({})
const historyRef = ref()
// 查询
const query = () => {
  tableRef?.value.query()
}

// 新增
const addRef = ref()
const create = () => {
  console.log('addRef', addRef)
  addRef?.value.open()
}

// 获取options
const options = ref({ test: [{ label: '1', value: '1' }] })
getOption({ type: baseName }).then(res => {
  options.value = res.data
  // 测试数据
  options.value.test = [{ label: '1', value: '1' }]
})

// 批量操作
const handleBatch = (name) => {
  const selection = tableRef.value.$table.getCheckboxRecords()
  if (!selection.length) {
    ElMessage.warning('请先选择行')
    return
  }
  const p_ids = selection.map(d => d.p_id)
  // const showLoading = () => loadings[name] = true
  // const closeLoading = () => loadings[name] = false
  const handle = {
    relevance: () => {
      const checkds = selection.filter(d => d.goods_link)
      if (!checkds.length) {
        ElMessage.error('请选择有1688采购链接的数据')
        return
      }
      batchRelevanceRef?.value.open(checkds)
    },
    supplier: () => {
      supplierRef?.value.open(selection)
    },
  }
  handle[name]()
}
// 单行操作
const HistoryPriceRef = ref()
const handleRow = (name, row, rowIndex) => {
  const { p_id } = row
  const showLoading = () => {
    loadings[name + rowIndex] = true
  }
  const closeLoading = () => {
    loadings[name + rowIndex] = false
  }
  const handle = {
    edit: () => {
      addRef?.value.open([p_id])
    },
    relevance: () => {
      relevanceRef?.value.open(p_id)
    },
    supplier: () => {
      supplierRef?.value.open([row])
    },
    HistoryPrice: () => {
      HistoryPriceRef?.value.open(row.sku)
    },
    log: () => {
      logRef?.value.open({ log_type: baseName, p_id })
    }
  }
  handle[name]()
}

// 列表配置
const tableOptions = reactive({
  rowConfig: { height: 112 },
  formConfig: {
    data: {
      skuInfo: { type: 'sku', value: '' },
      dateRange: { type: 'create_time', value: [], range: true }, // 组合
    }
  },
  columns: [
    { type: 'checkbox', fixed: 'left', width: 40 },
    {
      title: '图片', minWidth: 100, slots: {
        default: ({ row }) => {
          return <VImage src={row.main_img} size='80px' />
        }
      }
    },
    {
      title: 'SKU', minWidth: 260, slots: {
        default: ({ row }) => {
          return <div>
            <VText title='产品sku' value={row.sku} line={1} copy />
            <VText title='自定义sku' value={row.custom_sku} line={1} />
            <el-button link type='primary' onClick={() => historyRef?.value.open(row.sku)}>历史采购记录</el-button>
          </div>
        }
      }
    },
    {
      title: '供应商', field: 'supplier_name', minWidth: 160, line: 3
    },
    {
      title: '产品名称', field: 'product_abbrev', minWidth: 160, line: 3
    },
    {
      title: '采购员', field: 'purchaser_name', minWidth: 140
    },
    {
      title: '开发员', field: 'developer_name', minWidth: 140
    },
    {
      title: '属性', field: 'sku_specification', minWidth: 160, line: 3
    },
    {
      title: '采购价格信息', minWidth: 180, slots: {
        default: ({ row }) => {
          return <div>
            <VText title="采购未税报价" value={row.price_exclude_tax} />
            <VText title="供应商税点" value={row.tax_rate} />
            <VText title="采购含税价" value={row.price_include_tax} />
            <VText title="发票税点" value={row.invoice_tax_rate} />
            <VText title="采购未税价" value={row.purchase_untaxed_price} />
          </div>
        }
      }
    },
    {
      title: '移动加权平均价', field: 'move_average_price', minWidth: 120, slots: {
        default: ({ row }) => <div>
          <VText value={row.move_average_price} />
          {parseInt(row.move_average_price * 100) ? <VText value='历史移动加权' type='button' onClick={() => handleRow('HistoryPrice', row)} /> : ''}
        </div>
      }
    },
    {
      title: '采购链接', minWidth: 140, slots: {
        default: ({ row }) => <VText value={row.goods_link} type='link' line={2} onClick={() => window.open(row.goods_link, '_target')} />
      }
    },
    { title: '是否关联1688', field: 'is_assoc_ali', minWidth: 110 },
    { title: '是否需要审核', field: 'is_audit', minWidth: 110 },
    { title: '添加时间', field: 'create_time', minWidth: 170 },
    {
      title: '操作', width: 120, fixed: 'right', slots: {
        default: ({ row, rowIndex }) => {
          const { p_id, audit_status } = row
          // audit_status 审核状态：1待提交2待采购审核3待运营审核4待质检审核5待运营总监审核6待计划确认7待生成计划需求单8已驳回9已审核10已作废
          return <div class='nm flex flex-col gap-1 items-start'>
            <VButton auth="/purchase/product/product/editproduct" link type="primary" onClick={() => handleRow('edit', row)}>修改产品信息</VButton>
            <VButton auth="/purchase/product/product/batchassociation1688" link type="primary" onClick={() => handleRow('relevance', row)}>关联1688</VButton>
            <VButton auth="/purchase/product/product/editsupplier" link type="primary" onClick={() => handleRow('supplier', row)}>修改供应商</VButton>
            <VButton auth="/purchase/product/product/logs" link type="primary" onClick={() => handleRow('log', row)}>日志</VButton>
          </div>
        }
      }
    },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => api.query({ ...form, ...page })
    }
  }
})
</script>
  